<template>
  <el-container>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>注册轻听音乐账号</h2>
        <el-row class="captchaLoginPosition">
        </el-row>
      </div>
      <el-form status-icon class="demo-form" ref="form" :model="form" label-width="80px" methods="get" :rules="rules2">
        <el-row>
          <el-form-item prop="rname">
            <el-input type="text" v-model="form.rname" id="uname" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item prop="rpass">
            <el-input v-model="form.rpass" id="password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>

          <el-form-item prop="rpass2">
            <el-input v-model="form.rpass2" id="password1" type="password" placeholder="请确认密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register('form')">注册</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <hr />
      <p>
        注册代表同意 <a href="#">隐私政策</a> 和 <a href="#">服务条款</a>
      </p>
    </el-card>
    <el-footer>
      <Footer/>
    </el-footer>
    <div id="img">
         <img id="img_left" src="@/public/login/left_t.png" alt="">
          <img id="img_right" src="@/public/login/right_t.png" alt=""> 
      </div>
  </el-container>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import {url} from "@/apiUrl"//引入地址
console.log(url+`/users/regist`);
export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var checkPass = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入密码"));
        return false;
      } else {
        callback();
      }
    };
    var checkRname = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };

    var checkRpass = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var checkRpass2 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.rpass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      form: {
        name: "",
        pass: "",
        rname: "",
        // captcha: "",
        rpass: "",
        rpass2: "",
        rname: "",
      },
      toggle1: "",
      rules2: {
        name: [{ validator: checkName, trigger: "blur" }],
        pass: [{ validator: checkPass, trigger: "blur" }],
        rname: [{ validator: checkRname, trigger: "blur" }],
        // captcha: [{ validator: checkCaptcha, trigger: "blur" }],
        rpass: [{ validator: checkRpass, trigger: "blur" }],
        rpass2: [{ validator: checkRpass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapMutations("user", ["saveUser"]),

    async register(formName) {
      // console.log(formName);
      var flag = false;
      this.$refs[formName].validate((valiDatas) => {
        if (valiDatas) {
          flag = valiDatas;
        }
      });
      if (flag) { 
        console.log( this.form.rname, this.form.rpass2);
        this.$axios
          .post(`${url}/users/regist`, {
            user_name: this.form.rname,
            user_pwd: this.form.rpass2,
          })
          .then((res) => {
          if(res.data.code==200){
           this.$message.success("注册成功！请登录");
           this.$emit("login",true)  
          }else{
           this.$message.warning("用户名重复"); 
          }
           
          });
      } else {
        this.$message.error("完善信息!");
        return false;
      }
    },
    change(val) {
      if (val == 1) {
        this.toggle1 = true;
        this.$refs.form.resetFields();
      } else {
        this.toggle1 = false;
        this.$refs.form.resetFields();
      }
    },
  },
    mounted(){
      var that=this  
      var flag=false;
      function change_img(){
          if(flag){
              flag=false;
              document.getElementById('img_left').src=require('@/public/login/left_t.png')
              document.getElementById('img_right').src=require('@/public/login/right_t.png')
          }else{
              flag=true;
              document.getElementById('img_left').src=require('@/public/login/left_f.png')
              document.getElementById('img_right').src=require('@/public/login/right_f.png')
          }
      }
  //1.当用户名的输入框失焦时，对用户名进行非空验证：
      //如果为空则输入框边框变红，且在usernameMsg中显示“用户名不能为空”
      //输入用户名后，边框恢复为黑色
      //2.当密码输入框失焦时，先验证密码是否为空，如果为空则在passwordMsg中显示“密码不能为空”，且输入框边框变红
      //如果不为空，则验证长度是否少于6位，如果少于6位，则在passwordMsg中显示“密码长度不能少于6位”，且输入框边框变红
     var password=document.getElementById('password');
     password.addEventListener('blur',function(){
        change_img(true);
     })
     password.addEventListener('focus',function(){
        change_img(true);      

      })

      var password1=document.getElementById('password1');
     password1.addEventListener('blur',function(){
        change_img(true);
     })
     password1.addEventListener('focus',function(){
        change_img(true);      

      })
    }
};
</script>

<style lang="scss" scoped>
@import "../../assets/common.scss";
#uname{
  background-color: #000000 !important;
}

a{
  color:$undercolor !important;
}
#img{
          width: 100%;
          position: absolute;
          bottom: 0   ;
          display:flex;
          justify-content:space-between;
          z-index:0;
      }
      #img img{
          width: 300px;
      }
.el-main {
  height: 700px;
  position: relative;
}

.el-main img {
  width: 500px;
  height: 270px;
  position: absolute;
  top: 200px;
  left: 120px;
  background-repeat: no-repeat;
}

/* 登录的框框 */
.box-card {
  position: absolute;
  background-color: $undercolor-1;
  top:17%;
  right:29%;
  text-align: center;
  z-index: 10;
}

/* 输入的框框 */
.el-form {
  width: 500px;
  height: auto;
}

.el-form-item {
  margin: 10px 40px 20px -40px;
}

.el-button {
  width: 200px;
}

p,
p>a {
  color: rgb(156, 156, 156);
}

.captchaLogin {
  color: rgb(132, 132, 132);
  text-decoration: none;
}

.captchaLogin:hover {
  color: rgb(255, 78, 107);
}

.captchaInput {
  width: 320px;
}

.captcha {
  width: 100px;
  padding: 12px 8px;
}
</style>